<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rest API</title>
</head>
<body>
    <button onclick="testGet()">GET请求 查</button>
    <button onclick="testPost()">POST请求 增</button>
    <button onclick="testPut()">PUT请求 改</button>
    <button onclick="testDelete()">DELETE请求 删</button>
    <script>
        function axios({url, 
            method='GET',
            params={},
            data={}
        }){
            return new Promise((resolve, reject)=>{
                const xhr = new XMLHttpRequest();

                let qureyString='';
                Object.keys(params).forEach(key=>{
                   qureyString += `${key}=${params[key]}&`;  
                })
                if(qureyString){
                    qureyString = qureyString.substring(0, qureyString.length-1);
                    url += '?'+qureyString;
                }

                xhr.open(method, url, true);
                method = method.toUpperCase();

                if(method === 'GET' || method === 'DELETE'){
                    xhr.send();
                } else if(method === 'POST' || method === 'PUT'){
                    xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
                    xhr.send(JSON.stringify(data));
                }

                xhr.onreadystatechange = ()=>{
                    if(xhr.readyState === 4){
                        if(xhr.status>= 200 && xhr.status < 300){
                            const response = {
                                data: JSON.parse(xhr.response),
                                status:xhr.status,
                                statusText:xhr.statusText
                            }
                            resolve(response)
                        }
                        else {
                            reject(new Error('request error status is '+ xhr.status));
                        }
                    }
                }


            })
        }

        function testGet(params){
            axios({
                url:'http://localhost:9001/posts',
                params:{
                    id:1,
                    xx:2
                }
            })
            .then(response=>{
                console.log('Get', response);
            }, error=>{
                console.log(error)
            });
        }
        function testPost(params){
            axios({
                url:'http://localhost:9001/posts',
                method: 'POST',
                data: {
                    'title':'axios',
                    'author': 'typeicode'
                }
            })
            .then(response=>{
                console.log(response);
            }, error=>{
                console.log(error)
            })
        }
        function testPut(params){
            axios({
                url:'http://localhost:9001/posts/3',
                method: 'put',
                data: {
                    'title':'axio++',
                    'author': 'typeicode'
                }
            })
            .then(response=>{
                console.log(response);
            }, error=>{
                console.log(error)
            })
        }
        function testDelete(params){
            axios({
                url:'http://localhost:9001/posts/4',
                method: 'delete',
            })
            .then(response=>{
                console.log(response);
            }, error=>{
                console.log(error)
            })
        }
    </script>

</body>
</html>